import copy from 'copy-to-clipboard';

/**
 * 自定义代码区域的 header，实现复制、展开、折叠功能
 */
const msgCodeHeader = {
    data () {
        return {
        };
    },
    created () { },
    mounted () {
        // 通过notBindGlobalClick避免全局事件重复绑定
        if (!this.notBindGlobalClick) {
            this.$nextTick(() => {
                document.addEventListener('click', this.handleCodeHeaderClick);
            });
        }
    },
    beforeDestroy () {
        if (!this.notBindGlobalClick) {
            document.removeEventListener('click', this.handleCodeHeaderClick);
        }
    },
    computed: {},
    methods: {
        handleCodeHeaderClick (e) {
            if (
                e.target &&
                e.target.className &&
                e.target.className.baseVal &&
                e.target.className.baseVal.indexOf('code-action-icon')
            ) {
                if (e.target.className.baseVal.indexOf('code-action-copy') > -1) {
                    const markdownContent = decodeURIComponent(
                        e.target.parentElement.dataset.content
                    );
                    const codeBlocks = markdownContent.match(
                        /```.*?\n([\s\S]*?)(?:\n```|$)/g
                    );
                    if (codeBlocks && codeBlocks.length > 0) {
                        // 提取第一个代码块的内容（去掉```和语言标识）
                        const codeContent = codeBlocks[0]
                            .replace(/```.*?\n/, '')
                            .replace(/\n```$/, '');
                        copy(codeContent);
                        this.$message.success('复制成功');
                    } else {
                        console.log('No code blocks found in markdown');
                    }
                }
                if (e.target.className.baseVal.indexOf('code-action-expand') > -1) {
                    e.target.classList.toggle('code-close');
                    const preElement = e.target.closest('pre');
                    if (preElement) {
                        const codeElement = preElement.querySelector('code');
                        if (codeElement) {
                            codeElement.style.display =
                                codeElement.style.display === 'none' ? '' : 'none';
                        }
                    }
                }
            }
        },
        codeHeaderRender (lang, content) {
            return `<div class="code-language-header">
              <div class="code-lang-type">${lang}</div>
              <div class="code-actions" data-content="${encodeURIComponent(content)}">
                <svg class="v-icon code-action-icon code-action-copy" style="color: #fff; width: 16px; height: 16px;"><use xlink:href="#v-basic_copy_line" role="presentation" style="pointer-events: none;"></use></svg>
                <svg class="v-icon code-action-icon code-action-expand" style="color: #fff; width: 16px; height: 16px;"><use xlink:href="#v-arrow_down_small_line" role="presentation" style="pointer-events: none;"></use></svg>
              </div>
            </div>`;
        }
    }
};

export default msgCodeHeader;